<template>
    <el-dialog
      :title="`${name}配置`"  
      v-dialogDrag 
      :visible.sync="dialogVisible" 
      width="900px"
      :close-on-click-modal="false"
    >
      <el-form 
        ref="configForm" 
        :model="linesDialogForm" 
        label-width="100px" 
        class="compact-form"
        :rules="formRules"
        size="medium"
      >
        <!-- 基础信息区域 -->
        <div class="form-section compact-section">
            <div class="section-title">
                <i class="el-icon-tickets"></i>
                基础信息
            </div>
          <div class="form-grid">
            <el-form-item label="名称" prop="name" class="compact-item">
              <el-input 
                v-model="linesDialogForm.name" 
                placeholder="过程线名称"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>

            <el-form-item label="排序" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.index" 
                :min="1" 
                :max="100"
                controls-position="right"
              />
            </el-form-item>

            <el-form-item label="宽度" prop="width" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.width" 
                :min="100" 
                :max="2000"
                controls-position="right"
              />
            </el-form-item>

            <el-form-item label="高度" prop="height" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.height" 
                :min="100" 
                :max="1000"
                controls-position="right"
              />
            </el-form-item>
          </div>
        </div>

        <!-- 左Y轴设置 -->
        <div class="form-section compact-section">
          <div class="section-title">
            <i class="el-icon-s-fold"></i>
            左Y轴设置
          </div>
          <div class="form-grid">
            <el-form-item label="轴标题" class="compact-item">
              <el-input 
                v-model="linesDialogForm.unitTxt" 
                placeholder="左轴标题"
              />
            </el-form-item>

            <el-form-item label="最小值" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.valueMin" 
                controls-position="right"
              />
            </el-form-item>

            <el-form-item label="最大值" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.valueMax" 
                controls-position="right"
              />
            </el-form-item>

            <el-form-item label="间隔" prop="valueLen" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.valueLen" 
                controls-position="right"
              />
            </el-form-item>
          </div>
        </div>

        <!-- 右Y轴设置 -->
        <div v-if="!isFB" class="form-section compact-section">
          <div class="section-title">
            <i class="el-icon-s-fold"></i>
            右Y轴设置
          </div>
          <div class="form-grid">
            <el-form-item label="轴标题" class="compact-item">
              <el-input 
                v-model="linesDialogForm.unitTxt1" 
                placeholder="右轴标题"
              />
            </el-form-item>

            <el-form-item label="最小值" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.valueMin1" 
                controls-position="right"
              />
            </el-form-item>

            <el-form-item label="最大值" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.valueMax1" 
                controls-position="right"
              />
            </el-form-item>

            <el-form-item label="间隔" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.valueLen1" 
                controls-position="right"
              />
            </el-form-item>
          </div>
        </div>

        <!-- 时间设置 -->
        <div v-if="!isFB" class="form-section compact-section">
          <div class="section-title">
            <i class="el-icon-timer"></i>
            时间轴设置
          </div>
          <div class="form-grid">
            <el-form-item label="时间格式" prop="t_Format" class="compact-item">
              <el-select 
                v-model="linesDialogForm.t_Format" 
                placeholder="选择格式"
                style="width: 100%"
              >
                <el-option label="2014年11月15日" :value="1" />
                <el-option label="2014/11/15" :value="2" />
                <el-option label="2014-11-15" :value="3" />
              </el-select>
            </el-form-item>

            <el-form-item label="时间精度" prop="t_Part" class="compact-item">
              <el-select 
                v-model="linesDialogForm.t_Part" 
                placeholder="选择精度"
                style="width: 100%"
              >
                <el-option label="到日" :value="1" />
                <el-option label="到月" :value="2" />
                <el-option label="到年" :value="3" />
              </el-select>
            </el-form-item>

            <el-form-item label="间隔天数" prop="t_Len" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.t_Len" 
                :min="1" 
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </div>
        </div>

        <!-- 特殊设置 -->
        <div v-if="isFB" class="form-section compact-section">
          <div class="section-title">
            <i class="el-icon-setting"></i>
            特殊设置
          </div>
          <div class="form-grid">
            <el-form-item label="Y轴反转" class="compact-item">
              <el-switch
                v-model="linesDialogForm.ifReversalY"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>

            <el-form-item label="初始值" class="compact-item">
              <el-input-number 
                v-model="linesDialogForm.defaultVl" 
                controls-position="right"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <!-- 操作按钮 -->
      <div class="dialog-footer">
        <el-button 
          @click="handleCancel" 
          size="small"
          class="cancel-btn"
          icon="el-icon-circle-close"
        >
          取消
        </el-button>
        <el-button 
          type="primary" 
          @click="handleSaveLineDialog" 
          size="small"
          class="confirm-btn"
          :loading="saving"
          icon="el-icon-upload"
        >
          保存配置
        </el-button>
      </div>
    </el-dialog>
</template>

<script>
import { linesEidt } from "@/api/https";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    linesDialogForm: {
      type: Object,
      default: () => {
        return {
          name: '',
          width: 900,
          height: 400,
          valueMax: null,
          valueMin: null,
          valueLen: 1,
          valueMax1: null,
          valueMin1: null,
          valueLen1: 1,
          index: 1,
          t_Format: 1,
          t_Part: 1,
          t_Len: 1,
          unitTxt: '',
          unitTxt1: '',
          defaultVl: 0,
          ifReversalY: 0
        }
      }
    },
    name: {
      type: String,
      default: ''
    },
    isFB: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
      if (newVal) {
        this.saving = false;
      }
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      saving: false,
      formRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        width: [
          { required: true, message: '请输入宽度', trigger: 'blur' }
        ],
        height: [
          { required: true, message: '请输入高度', trigger: 'blur' }
        ],
        valueLen: [
          { required: true, message: '请输入间隔', trigger: 'blur' }
        ],
        t_Format: [
          { required: true, message: '请选择格式', trigger: 'change' }
        ],
        t_Part: [
          { required: true, message: '请选择精度', trigger: 'change' }
        ],
        t_Len: [
          { required: true, message: '请输入间隔', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleCancel() {
      this.dialogVisible = false;
    },
    handleSaveLineDialog() {
      this.$refs['configForm'].validate((valid) => {
        if (valid) {
          this.saving = true;

            linesEidt(this.linesDialogForm).then(res=>{
              if(res.isSuccess){
                this.$emit('saveLineDialog', { ...res.data });
                this.dialogVisible = false;
              }else{
                this.$message.error(res.errorMessage || '保存失败');
              }
            }).finally(()=>{
              this.saving = false;
            })
          
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.compact-form {
  .compact-section {
    margin-bottom: 16px;
    
    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 16px;
    }
  }
  
  .section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #409EFF;
    margin-bottom: 12px;
    
    i {
      font-size: 14px;
    }
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.compact-item {
  margin-bottom: 0;
}

</style>